import React from 'react';
import Button, { ButtonSize } from './components/Button';
import Alert from './components/Alert';
// import Menu from './components/Menu/menu';
import Menu, { MenuItem, SubMenu } from './components/Menu';
import Icon from './components/Icon/Icon';
function App() {
  return (
    <div className="App" style={{ padding: '10px 0' }}>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-around',
          marginBottom: 20,
        }}>
        <Button
          btnType="primary"
          size='lg'
          autoFocus
          onClick={(e: React.MouseEvent) => console.log(e)}>
          这是一个按钮
        </Button>
        <Button btnType="default">这是一个按钮</Button>
        <Button disabled btnType="danger" size='sm'>
          禁用的按钮
        </Button>

        <Button btnType="warning">禁用的按钮</Button>
        <Button btnType="link" href="www.baidu.com">
          link类型
        </Button>
      </div>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-around',
          flexWrap: 'wrap',
          marginBottom: 20,
        }}>
        <Alert title="这是Alert的标题" />
        <Alert title="这是Alert的标题" type="success" closed />
        <Alert
          title="这是Alert的标题xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
          type="danger"
          closed>
          我本来想了一段很长的描述，但是我忽然忘记了，那就没办法了，就稍微写一点点吧，生活所迫，能用就行，这就是我的原则
        </Alert>
        <Alert title="这是Alert的标题" type="warning">
          这是一段非常细的描述
        </Alert>
      </div>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-around',
          marginBottom: 20,
        }}>
        <Menu>
          <MenuItem>menu 1</MenuItem>
          <SubMenu title="menu2">
            <MenuItem>menu 2-1</MenuItem>
            <MenuItem>menu 2-2</MenuItem>
          </SubMenu>
          <MenuItem index={2}>menu 3</MenuItem>
        </Menu>
        <Menu mode="vertical">
          <MenuItem index={0}>menu 1</MenuItem>
          <SubMenu title="menu2">
            <MenuItem>menu 2-1</MenuItem>
            <MenuItem>menu 2-2</MenuItem>
          </SubMenu>
          <MenuItem index={2}>menu 3</MenuItem>
        </Menu>
      </div>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-around',
          marginBottom: 20,
        }}>
        <Icon name="arrow-down" color="red" />
        <Icon name="closed-captioning" color="green" />
        <Icon name="coffee" />
        <Icon name="percentage" size="3x" />
      </div>
    </div>
  );
}

export default App;
